<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%--
  ~ Copyright (c) 2017 22420103@QQ.COM 版权所有
  ~
  --%>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<meta name="description" content="Draggabble Widget Boxes with Persistent Position and State" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<c:set var="ctx" value="${pageContext.request.contextPath}" />
	<!-- bootstrap & fontawesome -->
	<link rel="stylesheet" href="${ctx }/static/assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${ctx }/static/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
	<!-- page specific plugin styles -->
	<link rel="stylesheet" href="${ctx }/static/assets/css/jquery-ui.custom.min.css" />
	<!-- text fonts -->
	<link rel="stylesheet" href="${ctx }/static/assets/css/fonts.googleapis.com.css" />

	<link rel="stylesheet" href="${ctx }/static/assets/css/bootstrap-datepicker3.min.css" />

	<!-- ace styles -->
	<link rel="stylesheet" href="${ctx }/static/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
	<!--[if lte IE 9]>
	<link rel="stylesheet" href="${ctx }/static/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
	<![endif]-->
	<link rel="stylesheet" href="${ctx }/static/assets/css/ace-skins.min.css" />
	<link rel="stylesheet" href="${ctx }/static/assets/css/ace-rtl.min.css" />
	<!--[if lte IE 9]>
	<link rel="stylesheet" href="${ctx }/static/assets/css/ace-ie.min.css" />
	<![endif]-->
	<!-- inline styles related to this page -->
	<!-- ace settings handler -->
	<script src="${ctx }/static/assets/js/ace-extra.min.js"></script>
	<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
	<!--[if lte IE 8]>
	<script src="${ctx }/static/assets/js/html5shiv.min.js"></script>
	<script src="${ctx }/static/assets/js/respond.min.js"></script>
	<![endif]-->
</head>

<body style="background-color: #fff;">
<div class="col-sm-5">
	<form id='gameReportQueryForm'>
		<div class="input-daterange input-group">
			<%--<input type="text" class="form-control" name="startDate" value="${startDate}"/>
            <span class="input-group-addon">
                <i class="fa fa-exchange"></i>
            </span>--%>
			<input type="text" class="form-control" name="endDate" value="${endDate}"/>

			<span class="input-group-btn">
				<button type="button" class="btn btn-purple btn-sm" onclick="$('#gameReportQueryForm').submit();">
					<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
					查询
				</button>
			</span>
		</div>
	</form>
</div>
<div id=context>
	<div class="col-xs-12" style="margin-top:5px;">
		<table id="simple-table" class="table table-bordered table-hover">
			<thead>
			<tr>
				<th class="center">序号</th>
				<th class="center">日期</th>
				<th class="center">用户ID</th>
				<th class="center">用户昵称</th>
				<th class="center">地区</th>
				<th class="center">金币</th>
				<th class="center">剩余房卡</th>
				<th class="center">消耗房卡</th>
			</tr>
			</thead>

			<tbody>
			<c:forEach items="${data}" var="item" varStatus="i">
				<tr>
					<td class="center">
							${i.index + 1}
					</td>
					<td class="center">${item.viewDate }</td>
					<td class="center">${item.userID}</td>
					<td class="center">${item.nickName}</td>
					<td class="center">${item.dwellingPlace}</td>
					<td class="center">${item.score}</td>
					<td class="center">${item.roomCards}</td>
					<td class="center">${item.roomCardResume}</td>
				</tr>
			</c:forEach>
			</tbody>
		</table>
	</div>
</div>
</body>
<script src="${ctx }/static/assets/js/jquery-2.1.4.min.js"></script>
<script src="${ctx }/static/assets/js/bootstrap-datepicker.min.js"></script>
<script src="${ctx }/static/js/paging.js"></script>
<script src="${ctx }/static/js/gameReport.js"></script>

<script>
    var ctx = "${ctx}";
    $('.input-daterange').datepicker({
        autoclose:true,
        format:"yyyy-mm-dd"
    });
</script>

</html>
